<template>
  <div class="login-container">
    <!-- 品牌展示区域 - 适应移动端 -->
    <div class="login-brand">
      <div class="brand-content">
        <img src="http://120.26.146.100:8889/public/monkey.png" class="brand-logo" alt="Logo"/>
        <div class="brand-text">
          <h1 class="brand-title">智能伙伴</h1>
          <p class="brand-slogan">连接优秀的人，共创未来</p>
        </div>
      </div>
    </div>

    <!-- 功能特点展示 -->
    <div class="login-features">
      <div class="feature-item">
        <span class="feature-icon">🔍</span>
        <span>智能匹配</span>
      </div>
      <div class="feature-item">
        <span class="feature-icon">👥</span>
        <span>团队协作</span>
      </div>
      <div class="feature-item">
        <span class="feature-icon">💬</span>
        <span>即时沟通</span>
      </div>
    </div>

    <!-- 注册表单区域 - 优化移动端体验 -->
    <div class="login-form-container">
      <h2 class="form-title">欢迎注册</h2>
      <p class="form-subtitle">创建账号，开始智能伙伴之旅</p>
      
      <van-tabs v-model:active="loginModel" class="login-tabs">
        <van-tab title="手机号注册" name="b">
          <RegisterPhoneModel></RegisterPhoneModel>
        </van-tab>
        <van-tab title="邮箱注册" name="c">
          <RegisterEmailModel></RegisterEmailModel>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>


<script setup lang="ts">
import { ref } from "vue";
import RegisterEmailModel from "../components/register/RegisterEmailModel.vue";
import RegisterPhoneModel from "../components/register/RegisterPhoneModel.vue";

const loginModel = ref('b');
</script>

<style scoped>
/* 重置默认样式，确保移动端体验 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow-x: hidden;
}

.login-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 0 16px;
  color: white;
  position: relative;
}

/* 品牌展示区域 - 完全移除顶部留白 */
.login-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  margin-top: 10px;
  padding-top: 10px;
}

.brand-content {
  display: flex;
  align-items: center;
  gap: 15px;
}

.brand-logo {
  width: 70px;
  height: 70px;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.brand-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.brand-title {
  font-size: 26px;
  font-weight: bold;
  margin: 0 0 4px 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.brand-slogan {
  font-size: 13px;
  opacity: 0.9;
  margin: 0;
}

/* 表单容器 - 优化移动端触摸体验 */
.login-form-container {
  width: 100%;
  background: white;
  border-radius: 16px;
  padding: 20px 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  animation: slideUp 0.5s ease-out;
  margin-bottom: 15px;
  flex: 1;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin: 0 0 8px 0;
  text-align: center;
}

.form-subtitle {
  font-size: 12px;
  color: #666;
  margin: 0 0 20px 0;
  text-align: center;
}

/* Vant 组件样式覆盖 */
.login-tabs {
  --active-color: #667eea;
  --tab-font-size: 14px;
  --tab-line-height: 24px;
}

/* 功能特点 */
.login-features {
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  margin-bottom: 15px;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.feature-icon {
  font-size: 22px;
}

/* 确保输入框水平居中且适合移动端的触摸面积 */
:deep(.van-field) {
  text-align: center;
  --field-label-width: 65px;
  margin-bottom: 8px;
}

:deep(.van-field__control) {
  font-size: 16px !important; /* 防止iOS缩放 */
  height: 42px;
  padding: 6px 0;
  text-align: left;
}

:deep(.van-field__label) {
  font-size: 13px;
  padding-right: 8px;
  text-align: left;
}

/* 优化验证码相关元素 */
:deep(.van-field--center) {
  --field-label-width: 55px;
}

/* 缩小验证码图片 */
:deep(.van-field__button .van-image) {
  width: 70px !important;
  height: 28px;
}

/* 缩小发送验证码按钮 */
:deep(.van-field__button .van-button--small) {
  padding: 0 8px;
  height: 28px;
  font-size: 12px;
}

/* 主按钮样式 */
:deep(.van-button--primary) {
  height: 42px;
  font-size: 16px;
  --button-border-radius: 10px;
}

/* 确保整个页面在小屏幕上也能正常显示 */
@media (max-width: 375px) {
  .login-container {
    padding: 0 12px;
  }
  
  .login-form-container {
    padding: 16px 12px;
  }
  
  .brand-content {
    gap: 10px;
  }
  
  .brand-logo {
    width: 60px;
    height: 60px;
  }
  
  .brand-title {
    font-size: 22px;
  }
  
  .brand-slogan {
    font-size: 12px;
  }
  
  :deep(.van-field) {
    --field-label-width: 60px;
  }
  
  :deep(.van-field--center) {
    --field-label-width: 50px;
  }
  
  :deep(.van-field__label) {
    font-size: 12px;
  }
}
</style>